<template>
  <div class="top flex">
    <div class="flex1 textR colorF font_s18 top_left cursor">
      <p @click="modal1 = true;">殡葬行业机构数据汇总</p>
    </div>
    <div class="flex1 middle">
      <p>
        <span class="font_s19 colorF">本年已售各类墓(穴)：</span>
        <span class="font_s40" style="color: #5AD834;"> 11940</span>
      </p>
      <p>
        <span class="font_s19 colorF">本周新增销售墓(穴)：</span>
        <span class="font_s22" style="color: #5AD834;"> 230</span>
      </p>
    </div>
    <div class="flex1 middle">
      <p>
        <span class="font_s19 colorF">本年已销节地墓(穴)：</span>
        <span class="font_s40" style="color: #5AD834;">3370</span>
      </p>
      <p>
        <span class="font_s19 colorF">本月新增销售(穴)：</span>
        <span class="font_s22" style="color: #5AD834;">71</span>
      </p>
    </div>
    <div class="flex1 middle">
      <p>
        <span class="font_s19 colorF">本年已落葬各类墓(穴)：</span>
        <span class="font_s40" style="color: #5AD834;"> 13225</span>
      </p>
      <p>
        <span class="font_s19 colorF">本月新增落葬(穴)：</span>
        <span class="font_s22" style="color: #5AD834;"> 1137</span>
      </p>
    </div>
    <div class="flex1 colorF font_s18 top_right cursor">
      <!-- <p @click="modal = true;">殡葬行业数据分析</p> -->
      <p>殡葬行业数据分析</p>
    </div>
    <!--------------------- 组件调用 -------------------->
    <ModalPolygon title="机构数据汇总" v-if="modal1" @hidden="hidden1">
      <Summary/>
    </ModalPolygon>
  </div>
</template>
<script>
import ModalPolygon from '@/components/ModalPolygon.vue'
import Summary from './components/Summary.vue'
export default {
  name: 'Top',
  components: {
    ModalPolygon,
    Summary
  },
  props: {
    msg: String
  },
  data () {
    return {
      modal: false,
      modal1: false
    }
  },
  methods: {
    hidden () {
      this.modal = false
    },
    hidden1 () {
      this.modal1 = false
    }
  }
}
</script>
<style lang="scss" scoped>
.datamain{
  height: 0;
  .top{
    width: 100%;
    position: absolute;
    top: 15%;
    color: aliceblue;
    .top_left{
      margin: 0 1rem;
      background: url(../../assets/img/data/16.png) no-repeat;
      background-size: 100% 100%;
      line-height:6.375rem;
      p{
        padding-right: 3rem;
      }
    }
    .middle{
      margin: 0 1rem;
      background: url(../../assets/img/data/18.png) no-repeat;
      background-size: 100% 100%;
      p{
        padding: 0.1rem 1rem;
      }
    }
    .top_right{
      margin: 0 1rem;
      background: url(../../assets/img/data/17.png) no-repeat;
      background-size: 100% 100%;
      line-height:6.375rem;
      p{
        padding-left: 3rem;
      }
    }
  }
}
</style>
